<template name="mars3d">
    <div id="mars3dMap"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue"
import * as mars3d from "mars3d"

let map
onMounted(() => {
    map = new mars3d.Map("mars3dMap", {
        scene: {
            center: {
                lng: 109,
                lat: 28,
                alt: 6000000
            },
            removeDblClick: true,
            showSkyBox: true,
            showSkyAtmosphere: true,
            fog: true,
            fxaa: true,
            globe: {
                depthTestAgainstTerrain: false,
                baseColor: "#546a53",
                showGroundAtmosphere: true,
                enableLighting: false
            }
        },
        control: {
            mouseDownView: true,
            locationBar: {
                fps: true
            },
            compass: {
                bottom: "toolbar", 
                left: "5px" 
            },
            distanceLegend: {
                left: "100px",
                bottom: "2px"
            },
            zoom: {
                enabled: true
            },
            baseLayerPicker: true,
            fullscreenButton: true,
            geocoder: true,
            homeButton: true,
            sceneModePicker: true,
            navigationHelpButton: true
        },
        basemaps: [
            { id: 10, name: "地图底图", type: "group" },
            {
                pid: 10,
                name: "高德电子",
                type: "gaode",
                icon: "img/basemaps/gaode_vec.png",
                layer: "vec",
                show: true
            },
            {
                pid: 10,
                name: "高德影像",
                type: "group",
                icon: "img/basemaps/gaode_img.png",
                layers: [
                    { name: "底图", type: "gaode", layer: "img_d" },
                    { name: "注记", type: "gaode", layer: "img_z" }
                ]
            },
            {
                pid: 10,
                name: "百度电子",
                icon: "img/basemaps/bd-vec.png",
                type: "baidu",
                layer: "vec"
            },
            {
                pid: 10,
                name: "百度影像",
                type: "group",
                icon: "img/basemaps/bd-img.png",
                layers: [
                    { name: "底图", type: "baidu", layer: "img_d" },
                    { name: "注记", type: "baidu", layer: "img_z" }
                ]
            },
            {
                pid: 10,
                name: "百度电子",
                icon: "img/basemaps/bd-vec.png",
                type: "baidu",
                layer: "vec"
            },
            {
                pid: 10,
                name: "腾讯影像",
                icon: "img/basemaps/tencent_img.png",
                type: "group",
                layers: [
                    { name: "底图", type: "tencent", layer: "img_d" },
                    { name: "注记", type: "tencent", layer: "img_z" }
                ]
            },
            {
                pid: 10,
                name: "腾讯电子",
                icon: "img/basemaps/tencent_vec.png",
                type: "tencent",
                layer: "vec"
            },
            {
                pid: 10,
                name: "ArcGIS影像",
                icon: "img/basemaps/esriWorldImagery.png",
                type: "xyz",
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                enablePickFeatures: false
            },
            {
                pid: 10,
                name: "微软影像",
                icon: "img/basemaps/bingAerial.png",
                type: "bing",
                layer: "Aerial"
            },
            {
                pid: 10,
                name: "OSM地图",
                type: "xyz",
                icon: "img/basemaps/osm.png",
                url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                subdomains: "abc"
            },
            {
                id: 2017,
                pid: 10,
                name: "暗色底图",
                type: "gaode",
                icon: "img/basemaps/blackMarble.png",
                layer: "vec",
                invertColor: true,
                filterColor: "#4e70a6",
                brightness: 0.6,
                contrast: 1.8,
                gamma: 0.3,
                hue: 1,
                saturation: 0
            },
            {
                pid: 10,
                name: "蓝色底图",
                icon: "img/basemaps/bd-c-midnight.png",
                type: "xyz",
                url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                chinaCRS: "GCJ02",
                enablePickFeatures: false
            },
            {
                pid: 10,
                name: "黑色底图",
                icon: "img/basemaps/bd-c-dark.png",
                type: "tencent",
                layer: "custom",
                style: "4"
            }
        ]
    })
})
</script>

<style scoped>
#mars3dMap{
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
